<template>
  <CollapsePanel name="element-extension-properties">
    <template #header> elementextensionproperties </template>
    <p>collapse-title :title="$t('panel.elementextensionproperties')"</p>
  </CollapsePanel>
</template>

<script lang="ts">
  import { defineComponent, markRaw } from 'vue';
  import { mapState } from 'pinia';
  import modelerStore from '/@/store/modules/bpmnModeler';
  import { CollapsePanel } from 'ant-design-vue';

  import { Base } from 'diagram-js/lib/model';
  import {
    getExtensionProperties,
    removeExtensionProperty,
  } from '/@/components/BpmnChart/src/components/Panel/bo-utils/extensionPropertiesUtil';

  import EventEmitter from '/@/utils/bpmn/EventEmitter';

  export default defineComponent({
    name: 'ElementExtensionProperties',
    components: { CollapsePanel },

    data() {
      return {
        extensions: [],
        extensionsRaw: [],
        newProperty: { name: '', value: '' },
        rules: {
          name: { required: true, message: '属性名称不能为空', trigger: ['blur', 'change'] },
          value: { required: true, message: '属性值不能为空', trigger: ['blur', 'change'] },
        },
        modelVisible: false,
      };
    },
    computed: {
      ...mapState(modelerStore, ['getActive', 'getActiveId']),
    },
    watch: {
      getActiveId: {
        immediate: true,
        handler() {
          this.reloadExtensionProperties();
        },
      },
    },
    mounted() {
      this.reloadExtensionProperties();
      EventEmitter.on('element-update', this.reloadExtensionProperties);
    },
    methods: {
      async reloadExtensionProperties() {
        this.modelVisible = false;
        await this.$nextTick();
        this.newProperty = { name: '', value: '' };
        (this.extensionsRaw as any[]) = markRaw(getExtensionProperties(this.getActive as Base));
        this.extensions = JSON.parse(JSON.stringify(this.extensionsRaw));
      },
      removeProperty(propIndex: number) {
        removeExtensionProperty(this.getActive as Base, this.extensionsRaw[propIndex]);
        this.reloadExtensionProperties();
      },
      async openPropertyModel() {
        this.modelVisible = true;
        await this.$nextTick();
      },
    },
  });
</script>

<style scoped></style>
